<template>
    <div class="attTable">
        <Row>
            <div class="tableBox tableBox1">
                <div class="borderBox">
                    <div class="date">日期</div>
                    <div class="dateLine"></div>
                    <div class="course course1">上课</div>
                    <div class="course course2">情况</div>
                    <div class="courseLine"></div>
                    <div class="name">姓名</div>
                    <div class="nameLine"></div>
                    <div class="index">序号</div>
                </div>
            </div>
            <div class="tableBox tableBox2">
                <table>
                    <thead>
                        <tr >
                            <th colspan="6">星期一</th>
                            <th colspan="6">星期二</th>
                            <th colspan="6">星期三</th>
                            <th colspan="6">星期四</th>
                            <th colspan="6">星期五</th>
                            <th colspan="4">星期日</th>
                            <th colspan="6">考勤统计</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>第1节</td>
                            <td>第2节</td>
                            <td>第3节</td>
                            <td>第4节</td>
                            <td>第5节</td>
                            <td>第6节</td>
                            <td>第1节</td>
                            <td>第2节</td>
                            <td>第3节</td>
                            <td>第4节</td>
                            <td>第5节</td>
                            <td>第6节</td>
                            <td>第1节</td>
                            <td>第2节</td>
                            <td>第3节</td>
                            <td>第4节</td>
                            <td>第5节</td>
                            <td>第6节</td>
                            <td>第1节</td>
                            <td>第2节</td>
                            <td>第3节</td>
                            <td>第4节</td>
                            <td>第5节</td>
                            <td>第6节</td>
                            <td>第1节</td>
                            <td>第2节</td>
                            <td>第3节</td>
                            <td>第4节</td>
                            <td>第5节</td>
                            <td>第6节</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>晚自习</td>
                            <td>早退</td>
                            <td>迟到</td>
                            <td>请假</td>
                            <td>缺勤</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="statistical" colspan="4">
                                <div class="fb">统计人</div>
                                <div style="font-size:10px;">{{statistical}}</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </Row>
    </div>
</template>

<script>
    export default {
        name: 'attendance-table',
        data() {
            return {
                statistical:"张老师"
            }
        },
    }
</script>

<style lang="less" scoped>
@import "./label.less";
// @border-color:#f00;
    .attTable{
        margin: 0 auto;
        width: 1052px;

        .tableBox{
            float: left;
            table{
                border-collapse: collapse;
                width: 100%;
                th,td{
                    border-color:@border-color;border-style: solid;border-width: 1px 1px 1px 1px;
                }
                th{
                    height: 40px;
                }
                td{
                    width: 25px;
                    min-width: 25px;
                    text-align: center;
                    height: 90px;
                    padding:0 2px;
                }
                td:last-child{
                    /*width:23px;//对齐最后一个单元格*/
                }

            }
            /* 斜线表头 */
            .borderBox{
                height: 221px;
                width: 100px;
                border-color:@border-color;border-style: solid;border-width: 1px 0 1px 1px;
                position: relative;
                overflow: hidden;
                .dateLine,.courseLine,.nameLine{
                    width: 300px;
                    height: 1px;
                    background: @border-color;
                    transform-origin:0 0;
                    position: absolute;
                    top:0;
                    left:0;
                }
                .date,.course,.name,.index{
                    position: absolute;
                }
                .date{
                    left: 60px;
                    top:20px
                }
                .dateLine{transform:rotate(47deg);}
                .courseLine{transform:rotate(61deg);}
                .nameLine{transform:rotate(74deg);}
                .course1{
                    top: 96px;
                    left: 60px;
                }
                .course2{
                    top: 112px;
                    left: 70px;
                }
                .name{
                    top:130px;
                    left:45px;
                }
                .index{
                    top:130px;
                    left:5px;
                }
            }
        }

        .statistical{
            div{
                height: 50%;
                text-align: center;
                padding-top:6px;
            }
            div:first-child{
                border-color:@border-color;border-style: solid;border-width: 0 0 1px 0;
            }
        }
    }
</style>
